<template>
  <div class="search-container">
    <div class="search-box">
      <div class="submit-box">
        <input type="text" placeholder="可输入关键字" class="search-input" @keyup="input" v-model.trim="keyword">
        <button class="bottom-submit"></button>
      </div>
    </div>
    <div class="screen-content">
      <ul class="screen-ul">
        <li v-tap="{methods:switchTab,data:item}" v-for="(item,index) in searchType" :class="{'active': item.active}" class="screen-li"
            :key="index">
          {{item.name}}
        </li>
      </ul>
    </div>
      <!--搜索区域默认显示-->
    <div class="no-listinfo" v-if="init">
      <p class="search-defaultnone"></p>
      <p class="search-tip">请在搜索框输入关键词汇进行全站检索</p>
    </div>

    <ul v-infinite-scroll="getMsg" infinite-scroll-disabled="switchLoad" infinite-scroll-distance="10">
      <li v-for="item in list">
        <div class="card-item flex">
          <template v-if="item.content.is_json">
            <router-link :to="{name:'articlePage',params: { id: item.content.msg_id }}" class="card-cover">
              <img :src="item.content.cover" alt="图片加载失败">
            </router-link>
          </template>
          <template v-else>
            <a :href="item.content.source_link" v-if="item.content.cover" target="_blank" class="card-cover"><img :src="item.content.cover" alt="图片加载失败"></a>
          </template>
          <div class="card-msg">
            <a :href="item.content.source_link" target="_blank" class="card-title">{{item.content.title}}</a>
            <div class="card-content-box">
              <span class="card-content">{{item.content.summary}}</span>
            </div>
            <div class="card-foot">
              <span class="data">{{item.content.date | time}}</span>
              <span class="source" v-if="item.content.source">{{item.content.source}}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="load-more-wrap" v-if="loadStatus && !noSearch">
      <img src="../../assets/svg/load-mord.svg" alt="" v-if="more">
      <p v-else>暂无更多数据</p>
    </div>
    <div class="no-searchinfo" v-if="noSearch">
      <p class="no-search-default"></p>
      <p class="no-search-tip">抱歉没有搜索到请重新搜索</p>
    </div>
  </div>
</template>

<script>
  import request from '../../../api/request'
  export default {
    name: 'search',
    data() {
      return {
        keyword: '',
        time: '',
        type: 'post',
        page: 0,
        pageSize: 10,
        noSearch: false, // 是否有搜索到数据
        more: true,  // 是否还有更多数据
        switchLoad: true,
        loadStatus: false,
        init: true,
        searchType: [
          {
            name: '新闻',
            type: 'post',
            active: true
          },
          {
            name: '报告',
            type: 'report',
            active: false
          },
          {
            name: '项目',
            type: 'project',
            active: false
          },
          {
            name: '活动',
            type: 'activity',
            active: false
          }
        ],
        list: []
      }
    },
    methods: {
      switchTab(params) {
        this.searchType.forEach((item) => {
          item.active = false
        })
        params.data.active = true
        this.type = params.data.type
        if(!this.init) {
          this.page = 0
          this.list = []
          this.noSearch = false
          this.more = true
          this.switchLoad = true
          this.loadStatus = true
          this.getMsg()
        }
      },
      input () {
        clearTimeout(this.time)
        this.time = setTimeout(() => {
          this.list = []
          this.page = 0
          this.init = false
          this.getMsg()
        },1000)
      },
      getMsg () {
        this.loadStatus = true
        this.page++
        request.post('search',{keywords: this.keyword, search_for: this.type, page: this.page, pageSize: this.pageSize}).then((response) => {
          if (response.data.code === '200') {
            this.switchLoad = false
            this.more = true
            this.list = this.list.concat(response.data.data.result.items)
            if(this.page === 1 && response.data.data.result.items.length === 0) {
              this.noSearch = true
            }
            if (!response.data.data.result.items.length) {
              this.more = false
              this.switchLoad = true
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-container {
    margin-top: 80px;
    width: 100%;
    height: calc(100% - 80px);
    padding: 40px;
    .search-box {
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      .submit-box {
        width: 100%;
        height: 80px;
        border: 2px solid #00ba91;
        background: #fff;
        position: relative;
        margin-top: 80px;
        margin-bottom: 62px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .search-input {
          width: 100%;
          height: 36px;
          font: 32px arial;
          border: none;
          outline: none;
          padding-left: 24px;
          padding-right:80px;
        }
        .bottom-submit {
          width: 40px;
          height: 40px;
          background: url("../../assets/svg/search.svg") no-repeat;
          position: absolute;
          top: 18px;
          right: 20px;
          cursor: pointer;
          border: none;
        }
      }
    }
    .screen-content {
      width: 100%;
      .screen-ul {
        display: flex;
        justify-content: flex-start;
        position: relative;
        &::after {
          content: '';
          width: 100%;
          height: 1px;
          background-color: #cad0d8;
          position: absolute;
          bottom: 0;
          z-index: 1;
        }
        .screen-li {
          height: 80px;
          line-height: 80px;
          width: 25%;
          font-size: 28px;
          color: #1b1d21;
          text-align: center;
          cursor: pointer;
          border: 1px solid #f7f8fa;
          transition: all .2s ease;
        }
        .active {
          border-left: 1px solid #cad0d8;
          border-top: 1px solid #cad0d8;
          border-right: 1px solid #cad0d8;
          border-bottom: 1px solid #f7f8fa;
          z-index: 9;
          transition: all .3s ease;
        }
        li.screen-li:first-child.active {
          border-left: 1px solid #f7f8fa;
        }
      }
    }
    .card-item {
      width: 100%;
      align-items: center;
      padding: 24px 0;
      .card-cover {
        margin-right: 40px;
        width: 180px;
        overflow: hidden;
        cursor: pointer;
        img {
          text-align: center;
          font-size: 28px;
          line-height: 270px;
          color: #00ba91;
          width: 100%;
          height: 100%;
          transition: .7s;
        }
      }
      .card-msg {
        position: relative;
        flex: 1;
        .card-title {
          display: block;
          font-weight: 400;
          font-size: 30px;
          line-height: 48px;
          max-height: 48px;
          margin-bottom: 16px;
          text-align: justify;
          color: #33383e;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          cursor: pointer;
          &:hover {
            color: #00ba91;
          }
        }
        .card-content-box {
          .card-content {
            display: block;
            font-size: 26px;
            line-height: 1.5;
            letter-spacing: 0.2px;
            color: #878787;
            transition: all ease-in-out .5s;
            text-align: justify;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          .read-more {
            display: inline-block;
            font-size: 26px;
            color: #1b1d21;
            letter-spacing: .2px;
            cursor: pointer;
            &:hover {
              color: #00ba91;
            }
          }
        }
        .card-foot {
          display: flex;
          margin-top: 24px;
          .data {
            font-size: 24px;
            color: #aaaaaa;
          }
          .vertical-bar {
            display: block;
            width: 1px;
            height: 26px;
            background: #aaaaaa;
            margin: 0 10px;
          }
          .source {
            font-size: 24px;
            color: #aaaaaa;
            &:before {
              content: '|';
              margin: 0 20px;
            }
          }
        }
      }
    }
    .no-listinfo {
      padding-top: 214px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .search-defaultnone {
        width: 204px;
        height: 204px;
        background: url("../../assets/svg/search_default.svg") no-repeat center center;
      }
      .search-tip {
        padding-top: 28px;
        font-size: 28px;
        color: #aaaaaa;
      }
    }
    .no-searchinfo {
      padding-top: 214px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .no-search-default {
        width: 204px;
        height: 204px;
        background: url("../../assets/svg/search_noinfor.svg") no-repeat center center;
      }
      .no-search-tip {
        padding-top: 28px;
        font-size: 28px;
        color: #aaaaaa;
      }
    }
  }
</style>
